<template>
    <div class="samebox">
        <div class="q_xxpxjl">
            <img src="../assets/renzhihou.png" alt="">
            <div style="margin-left: 20px;">考试成绩及答辩情况</div>
        </div>

        <div class="q_zssx" style="text-align: right">
            <el-row>
                <el-button type="primary" size="medium" class="el-icon-s-promotion" @click="dialogVisible=true">新增
                </el-button>
                <el-button type="" size="medium" class="el-icon-delete">删除</el-button>
            </el-row>
        </div>
        <div>
            <table class="table table-bordered">
                <thead>
                <tr class="q_xuhao">
                    <td>序号</td>
                    <td>日期</td>
                    <td>考试种类</td>
                    <td>考试科目</td>
                    <td>考试成绩</td>
                    <td>组织考试单位</td>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,index) in examData">
                    <td>
                        <input type="checkbox">
                        <span>{{index+1}}</span>
                    </td>
                    <td>{{item.fRqnyr}}</td>
                    <td>{{item.fKszl}}</td>
                    <td>{{item.fKskm}}</td>
                    <td>{{item.fKscj}}</td>
                    <td>{{item.fZzksdw}}</td>
                </tr>

                <tr style=" height: 113px; "></tr>

                <tr style=" height: 176px; ">
                    <td colspan="3" style="line-height: 176px; background-color: rgb(248,248,248);">
                        <samp>*</samp>&nbsp;&nbsp;
                        答辩情况：
                    </td>
                    <td colspan="3"></td>
                </tr>
                </tbody>
            </table>
        </div>
        <!--   弹出框     -->
        <el-dialog
                title="考试成绩及答辩情况"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose"
                center>
            <el-form :model="examRule" :rules="rules" ref="ruleForm"
                     label-width="100px" class="demo-ruleForm"
                     style="margin: 0 auto">
                <el-form-item label="考试种类" prop="fKszl">
                    <el-input v-model="examRule.fKszl" palceholder="考试种类"></el-input>
                </el-form-item>
                <el-form-item label="考试科目" prop="fKskm">
                    <el-input v-model="examRule.fKskm" palceholder="考试科目"></el-input>
                </el-form-item>
                <el-form-item label="考试日期" required>
                    <el-col :span="24">
                        <el-form-item prop="fRqnyr">
                            <el-date-picker type="date" placeholder="选择日期" v-model="examRule.fRqnyr"
                                            style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="考试成绩" prop="fKscj">
                    <el-input v-model.number="examRule.fKscj" palceholder="考试成绩"></el-input>
                </el-form-item>
                <el-form-item label="考试单位" prop="fZzksdw">
                    <el-input v-model="examRule.fZzksdw" palceholder="组织考试单位"></el-input>
                </el-form-item>
                <el-form-item label="答辩情况" prop="replyDetails">
                    <el-input type="textarea" v-model="examRule.replyDetails"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(examRule,'examRule')">确认</el-button>
                    <el-button type="primary" @click="resetForm()">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!--        -->
        <div class="q_sub  text-center">
            <el-button type="primary" size="medium">保存</el-button>
            <el-button type="primary" size="medium">保存并下一步</el-button>
        </div>
    </div>
</template>

<script>
    import "../assets/samecss/same.css"

    export default {
        name: "OfficeLaterRecord",
        methods: {
            //提示关闭
            handleClose(done) {
                this.$confirm('确认关闭？').then(_ => {
                    done();
                }).catch(_ => {
                });
            },
            submitForm(form,formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.data().examData.push(form)
                    } else {
                        return false;
                    }
                });
            },
            resetForm() {
                this.examRule={};
            },

        },
        data() {
            let checkScore = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('成绩不能为空'));
                }
                setTimeout(() => {
                    if (!Number.isInteger(value)) {
                        callback(new Error('请输入数字值'));
                    } else {
                        if (value < 0) {
                            callback(new Error('成绩必须大于等于0'));
                        } else {
                            callback();
                        }
                    }
                }, 1000);}
                return {
                    dialogVisible: false,//
                    examData: [
                        {
                            fKscj: 120,//考试成绩
                            fZzksdw: '四川考试院',//组织考试单位
                            fRqnyr: '2020-12-12',//考试时间
                            replyDetails: '完成答辩',//答辩详情
                            fKszl: '理论数学',//考试种类
                            fKskm: '高等数学',//考试科目
                        }
                    ],
                    examRule: {
                        fKscj: '',//考试成绩
                        fZzksdw: '',//组织考试单位
                        fRqnyr: '',//考试时间
                        replyDetails: '',//答辩详情
                        fKszl: '',//考试种类
                        fKskm: '',//考试科目
                    },
                    //    表单验证规则
                    rules: {
                        fKscj: [
                            {validator: checkScore, trigger: 'blur'}
                        ],
                        fZzksdw: [
                            {required: true, message: '请输入考试组织单位名称', trigger: 'blur'},
                            {min: 5, max: 50, message: '长度在 5 到 50 个字符', trigger: 'blur'}
                        ],
                        fRqnyr: [
                            {type: 'date', required: true, message: '请选择日期', trigger: 'blur'}
                        ],
                        replyDetails: [
                            {required: true, message: '请输入答辩详情', trigger: 'blur'},
                            {min: 5, message: '长度在 大于3 个字符', trigger: 'blur'}
                        ],
                        fKszl: [
                            {required: true, message: '请输入考试种类', trigger: 'blur'},
                            {min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
                        ],
                        fKskm: [
                            {required: true, message: '请输入考试科目', trigger: 'blur'},
                            {min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur'}
                        ],
                    },

                }
            }

    }
</script>

<style scoped>

</style>
